<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/felxibel.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body style="font-size: 12px;">
    <div id="container">
        <header>
            <aside class="header_top">
                <input type="search" name="search" class="from_input search" value="寻找宝贝商铺">
            </aside>
            <aside class="header_bg">
                <ul class="img_list">
                    <li>
                        <a href="#"><img src="img/bg1.jpg" alt="图片"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/bg2.jpg" alt="图片"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/bg3.jpg" alt="图片"></a>
                    </li>
                    <li class="bgActive">
                        <a href="#"><img src="img/bg4.jpg" alt="图片"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/bg5.jpg" alt="图片"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/bg6.jpg" alt="图片"></a>
                    </li>
                </ul>
                <ol class="circle">
                    <li ></li>
                    <li></li>
                    <li></li>
                    <li class="bgActive"></li>
                    <li></li>
                    <li></li>
                </ol>
            </aside>
            <nav>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav1.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>天猫新品</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav2.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>今日爆款</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav3.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>天猫国际</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav4.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>饿了么</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav5.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>天猫超市</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav6.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>充值中心</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav7.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>机票酒店</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav8.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>金币庄园</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav9.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>阿里拍卖</p>
                    </dd>
                </dl>
                <dl class="nav_list">
                    <dt>
                        <a href="#">
                            <img src="./img/nav10.png" alt="nav">
                        </a>
                    </dt>
                    <dd>
                        <p>淘宝吃货</p>
                    </dd>
                </dl>
            </nav>
        </header>
        <main>
            <aside class="main_shop">
                <aside class="shop_left">
                    <div class="shop_hd">
                        <img src="img/聚划算.png" alt="聚划算">
                    </div>
                    <div class="shop_bd">
                        <dl class="shop_list">
                            <dt>
                              <span class="shop_title">品牌折扣</span>
                            </dt>
                            <dd>
                                <a href="#">
                                    <img src="./img/shop1.webp" alt="图片">
                                </a>
                            </dd>
                        </dl>
                        <dl class="shop_list">
                            <dt>
                              <span class="shop_title">划算好货</span>
                            </dt>
                            <dd>
                                <a href="#">
                                    <img src="./img/shop2.webp" alt="图片">
                                </a>
                            </dd>
                        </dl>
                    </div>
                </aside>
                <aside class="shop_left">
                    <div class="shop_hd">
                        <img src="img/淘宝直播.png" alt="淘宝直播">
                    </div>
                    <div class="shop_bd">
                        <dl class="shop_list">
                            <dt>
                              <span class="shop_title">好物传送门</span>
                            </dt>
                            <dd>
                                <a href="#">
                                    <img src="./img/shop3.webp" alt="图片">
                                </a>
                            </dd>
                        </dl>
                        <dl class="shop_list">
                            <a href="#">
                                <img src="./img/shop4.webp" alt="图片">
                            </a>
                        </dl>
                    </div>
                </aside>
                
            </aside>
        </main>
    </div>
</body>
</html>